<template>
  <div>
    <div class="mtop">
      <div class="imgb">
        <img src="../../assets/images/my.jpg" alt="" />
      </div>
      <div class="tit">
        <div>我喜欢的歌曲不在这里</div>
      </div>
      <div class="btn" @click="$router.go(-1)">
        <span class="iconfont icon-fanhui-xianxing"></span>
        关于我有话说
      </div>
    </div>
    <dl class="musiclist">
      <dt>张四发</dt>
      <dd>
        <h3>身高</h3>
        <div>3m</div>
      </dd>
      <dd>
        <h3>体重</h3>
        <div>90kg</div>
      </dd>
      <dd>
        <h3>生日</h3>
        <div>1902-3-16</div>
      </dd>
      <dd>
        <h3>年龄</h3>
        <div>119岁</div>
      </dd>
    </dl>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
};
</script>
<style lang="less">
.mtop {
  height: 40vh;
  background-color: #ccc;
  position: relative;
  .imgb {
    height: 100%;
    img {
      width: 100%;
    }
  }
  .tit {
    position: absolute;
    left: 18px;
    bottom: 25px;
    font-size: 5vw;
    font-weight: bolder;
    color: #fff;
    span {
      font-size: 3vw;
    }
  }
  .btn {
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 4vw;
    color: #fff;
    font-weight: bolder;
  }
}
.musiclist {
  height: 60vh;
  border-radius: 12px 12px 0 0;
  position: relative;
  background-color: #f2f3f4;
  top: -12px;
  overflow: scroll;
  dt {
    height: 46px;
    border-bottom: 2px solid #e2e2e2;
    font-size: 0.5em;
    line-height: 46px;
    text-align: center;
  }
  dd {
    height: 70px;
    display: flex;
    color: #707271;
    border-bottom: 2px solid #e2e2e2;
    h3 {
      flex: 0 0 50px;
      text-align: center;
      line-height: 78px;
      font-size: 0.5em;
    }
    div {
      flex: 1;
      line-height: 70px;
      text-align: center;
    }
  }
}
</style>